<template>
  <div class="app-container">
    <div class="filter-container">
      <el-button class="filter-item"
                 style="margin-left: 10px;"
                 type="primary"
                 size="mini"
                 icon="el-icon-edit"
                 @click="handleCreate">
        添加
      </el-button>
    </div>

    <el-table :key="tableKey"
              v-loading="listLoading"
              :data="list"
              border
              fit
              highlight-current-row
              style="width: 100%">
      <el-table-column prop="Name"
                       label="角色名">
      </el-table-column>
      <el-table-column prop="InsertDate"
                       label="创建时间"
                       width="180">
      </el-table-column>
      <el-table-column label="操作"
                       width="250">
        <template slot-scope="scope">
          <el-button size="mini"
                     @click="handlePermission(scope.$index, scope.row)">权限</el-button>
          <el-button size="mini"
                     @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button size="mini"
                     type="danger"
                     @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <update-dialog ref="update"></update-dialog>
    <permission-dialog ref="permission"></permission-dialog>
  </div>
</template>

<script>
import { read, destroy } from '@/api/sys/role'
import update from './update'
import permission from './permission'

export default {
  name: 'SysRole',
  components: {
    'update-dialog': update,
    'permission-dialog': permission
  },
  data () {
    return {
      tableKey: 0,
      listLoading: true,
      list: null
    }
  },
  created () {
    this.getList()
  },
  methods: {
    getList () {
      this.listLoading = true
      read().then(response => {
        this.list = response.Data
        this.listLoading = false
      })
    },
    handleCreate () {
      this.$refs.update.open()
    },
    handlePermission (index, row) {
      this.$refs.permission.open(row.Id)
    },
    handleEdit (index, row) {
      this.$refs.update.open(row.Id)
    },
    handleDelete (index, row) {
      let that = this
      this.$confirm('此操作将永久删除该角色, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        destroy(row.Id).then(response => {
          that.getList()
          that.$message({
            type: 'success',
            message: '删除成功!'
          });
        })
      }).catch(() => { });
    }
  }
}
</script>
